<template>
  <ve-card title="收款方式" :customContentStyle="{ paddingBottom: 0 }" v-bind="$attrs">
    <template #extra v-if="form.paymentScheme == 2 && !$attrs.fold">
      <view class="view-btn" :customStyle="{ padding: 0, fontSize: '28rpx' }" @click.stop="toBillPlan">查看账单计划</view>
    </template>
    <template #operator-left v-if="form.paymentScheme == 2 && $attrs.fold">
      <view class="view-btn" :customStyle="{ padding: 0, fontSize: '28rpx' }" @click.stop="toBillPlan">查看账单计划</view>
    </template>
    <ve-form-item label="是否分期">
      <ve-radio :list="dict.paymentScheme" v-model="form.paymentScheme" />
      <template #footer v-if="form.paymentScheme == 2">
        <view class="form-block">
          <ve-form-item prop="paymentMethod" label="分期方式" :borderBottom="false">
            <ve-picker-inline v-model="form.paymentMethod" placeholder="请选择" :range="paymentMethodList" unit="arrowRight" />
          </ve-form-item>
        </view>
      </template>
    </ve-form-item>
    <ve-form-item v-if="form.paymentScheme == 2" label="首期付款日" prop="lnstalmentFirstDate" required :borderBottom="false">
      <ve-date-picker mode="date" v-model="form.lnstalmentFirstDate"></ve-date-picker>
    </ve-form-item>
  </ve-card>
</template>

<script setup>
  import { inject, computed } from 'vue'
  const form = inject('form')
  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('longOrderDict')
  const props = defineProps({
    // 订单总金额
    contractAmount: Number,
  })

  // 分期方式
  const paymentMethodList = computed(() => {
    return dict.paymentMethod?.filter((item) => item.label != '全款') || []
  })

  // 跳转账单计划
  const toBillPlan = () => {
    if (!form.value.lnstalmentFirstDate || !form.value.paymentMethod) {
      uni.showToast({
        title: !form.value.lnstalmentFirstDate ? '请先选择首期收款日' : '请先选择分期方式',
        icon: 'none',
        duration: 2000,
      })
      return
    }
    let query = {
      rentDays: form.value.leaseNumberStr,
      contractAmount: props.contractAmount,
      lnstalmentFirstDate: form.value.lnstalmentFirstDate,
      paymentMethod: form.value.paymentMethod,
    }
    uni.navigateTo({
      url: `/pages/order/long-order/detail/bill-plan?mode=preview&query=` + JSON.stringify(query),
    })
  }
</script>

<style lang="less" scoped>
  .form-block {
    background: #f7f8fa;
    padding: 0 24rpx;
  }
  .view-btn {
    height: 84rpx;
    font-size: 28rpx;
    color: #3072f6;
    line-height: 84rpx;
  }
</style>
